<template>
  <div class="topo-toolbox uni-scroll">
    <el-tabs
      v-model="tabIndex"
      type="border-card"
      :stretch="true"
    >
      <el-tab-pane
        :label="$t('device')"
        name="0"
        class="uni-scroll"
      >
        <el-collapse>
          <el-collapse-item
            v-for="(group,index1) in toolbox"
            :key="index1"
            :name="index1"
          >
            <template slot="title">
              <i style="margin-left: 20px" :class="group.icon" /><span>{{ group.title }}</span>
            </template>
            <div class="toolbox-group">
              <template v-for="(value,index) in group.items">
                <div
                  :key="index"
                  class="toolbox-item"
                  draggable="true"
                  @dragstart="onDragstart($event,value)"
                >
                  <!-- 判断是不是字体图标 -->
                  <template v-if="value.iconType === 'font'">
                    <div class="toolbox-item-icon">
                      <i
                        class="fa"
                        :class="value.icon"
                        aria-hidden="true"
                        style="font-size: 20px;line-height: 30px"
                      />
                    </div>
                    <div class="toolbox-item-text">{{ value.text }}</div>
                  </template>
                  <template v-else-if="value.iconType === 'icon'">
                    <div class="toolbox-item-icon">
                      <i
                        class="fa iconfont"
                        :class="value.icon"
                        aria-hidden="true"
                      />
                    </div>
                    <div class="toolbox-item-text">{{ value.text }}</div>
                  </template>
                  <template v-else>
                    <div class="toolbox-item-icon">
                      <img
                        class="topo-dom"
                        :src="value.icon"
                        style="width: 25px;height: 25px;margin: 0 auto"
                      >
                    </div>
                    <div class="toolbox-item-text">{{ value.text }}</div>
                  </template>
                </div>
              </template>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane :label="$t('component')" name="1" class="uni-scroll">
        <el-collapse>
          <el-collapse-item
            v-for="(group,index1) in svgToolbox"
            :key="index1"
            :name="index1"
          >
            <template slot="title">
              <i style="margin-left: 20px" :class="group.icon" /><span>{{ group.title }}</span>
            </template>
            <div class="toolbox-group">
              <template v-for="(value,index) in group.items">
                <div
                  :key="index"
                  class="toolbox-item"
                  draggable="true"
                  @dragstart="onDragstart($event,value)"
                >
                  <!--svg-->
                  <template v-if="value.iconType === 'svg'">
                    <div class="item-icon">
                      <embed
                        class="icon iconfont"
                        :src="value.icon"
                        width="30px"
                        height="30px"
                        style="pointer-events: none"
                        type="image/svg+xml"
                        pluginspage="http://www.adobe.com/svg/viewer/install/"
                      >
                    </div>
                    <div class="toolbox-item-text">{{ value.text }}</div>
                  </template>
                  <template v-else>
                    <div class="toolbox-item-icon">
                      <img
                        class="topo-dom"
                        :src="value.icon"
                        style="width: 30px;height: 30px;margin: 0 auto"
                      >
                    </div>
                    <div class="toolbox-item-text">{{ value.text }}</div>
                  </template>
                </div>
              </template>
            </div>
          </el-collapse-item>
        </el-collapse>
        <div style="width: 50px;margin: 10px auto">
          <el-button
            type="primary"
            @click="gotoComponent"
          >{{ $t('edit') }}
          </el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listSensorWith } from '@/api/iot/iotDeviceSensorApi'
import { getBaseComponents } from './util/baseComponentList'
import { listDeviceViewComponentGroup } from '@/api/iot/iotDeviceViewComponentGroupApi'
import { listDeviceViewComponent } from '@/api/iot/iotDeviceViewComponentApi'
import { getBorderComponents } from '@/topo/components/topo/util/borderComponentList'
import { makeExplainList, makeParamList, makeSettingList } from '@/topo/components/topo/util/iotComponentList'
import { makeUrlList } from '@/topo/components/topo/util/urlComponentList'

export default {
  name: 'TopoToolbox',
  data() {
    return {
      toolbox: [],
      svgToolbox: [],
      selectedIndex: -1,
      deviceId: null,
      tabIndex: '0'
    }
  },
  mounted() {
    const param = this.$route.query
    this.deviceId = param.deviceId
    this.listSensorWith()
    this.getSvg()
  },
  methods: {
    getSvg() {
      this.svgToolbox = []
      listDeviceViewComponentGroup().then(groupListRes => {
        if (groupListRes.code === '200') {
          groupListRes.data.forEach(group => {
            listDeviceViewComponent({
              groupId: group.groupId
            }).then(componentListRes => {
              if (componentListRes.code === '200') {
                this.svgToolbox.push(makeUrlList(group.name, componentListRes.data))
              }
            })
          })
        }
      })
    },
    gotoComponent() {
      this.$router.push({
        path: '/topo/component/manage'
      })
    },
    listSensorWith() {
      listSensorWith({
        deviceId: this.deviceId,
        withExplain: true,
        withParam: true,
        withSetting: true
      }).then(res => {
        this.toolbox = []
        this.toolbox.push(getBaseComponents(this))
        this.toolbox.push(getBorderComponents(this))
        const { code, data } = res
        if (code === '200') {
          data.forEach(sensor => {
            if (sensor.explainList.length > 0) {
              this.toolbox.push(makeExplainList(this, sensor))
            }
            if (sensor.settingList.length > 0) {
              this.toolbox.push(makeSettingList(this, sensor))
            }
            if (sensor.paramList.length > 0) {
              this.toolbox.push(makeParamList(this, sensor))
            }
          })
        }
      })
    },
    onDragstart(event, info) {
      const infoJson = JSON.stringify(info.info)
      event.dataTransfer.setData('my-topo-info', infoJson)
    }
  }
}
</script>

<style lang="scss">
.topo-toolbox {
  overflow-y: auto;
  overflow-x: hidden;

  .toolbox-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;

    .toolbox-item {
      width: 65px;
      margin: 5px;
      padding: 5px;
      color: #777;
      border: transparent solid 1px;
      text-align: center;

      &.base {
        width: 64px;
      }

      .toolbox-item-icon {

      }

      .toolbox-item-text {
        margin-top: 10px;
      }
    }

    .toolbox-item:hover {
      border: #ccc solid 1px;
      background: #ccc;
      color: #3388ff;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss" scoped>
.item-icon {
  height: 30px;

  .iconfont {
    font-size: 30px;
    margin-left: 14px;
  }
}

.el-tabs {
  height: 100%;
}

.el-tab-pane {
  height: 100%;
}
</style>
